<template>
  <div class="home">
    <a-spin :spinning="spinning">
      <Search @handleSearch="handleSearch" />
      <div class="home-contain">
        <List
          :dataList="dataList"
          @handleCreate="handleCreate"
          @handleMore="handleMore"
          @handleDelete="handleDelete"
        />
        <div class="home-page">
          <a-pagination
            v-model="pageNum"
            show-quick-jumper
            :default-current="pageNum"
            :total="total"
            :default-page-size="pageSize"
            @change="handlePage"
            ref="pagination"
          />
        </div>
      </div>
    </a-spin>
    <!-- 新增弹窗 -->
    <CreateModal
      :showVisible.sync="showVisible"
      v-if="showVisible"
      @handleCreateUpdate="handleCreateUpdate"
    />
    <MoreModel
      :showVisible.sync="showModel"
      v-if="showModel"
      :dataSource="dataSource"
      :loading="loading"
      :pageNum="pageNumModel"
      ref="MoreModel"
      @handlePageCurrent="handlePageCurrent"
    />
  </div>
</template>

<script>
import Search from './components/Search.vue'
import List from './components/List.vue'
import CreateModal from './components/CreateModal.vue'
import MoreModel from './components/MoreModel.vue'
import {
  getConfiguredViews,
  deleteConfiguredViews,
  createViews,
  getConfiguredViewsDetailInfo
} from '@/api/home.js'

import route from '@/mixins/router';

export default {
  name: 'Home',
  mixins: [
    route
  ],
  components: {
    [Search.name]: Search,
    [List.name]: List,
    [CreateModal.name]: CreateModal,
    [MoreModel.name]: MoreModel
  },
  data () {
    return {
      pageNum: 1,
      pageSize: 7,
      total: 0,
      params: {},
      dataList: [],
      showVisible: false,
      showModel: false,
      spinning: false,
      dataSource: {},
      loading: false,
      pageNumModel: 1
    }
  },
  methods: {
    handleParams () {
      return {
        ...this.params,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
    },
    /* 查询 */
    handleSearch (e) {
      this.params = e
      this.pageNum = 1
      this.initList()
    },
    handlePage (e) {
      this.pageNum = e
      this.initList()
    },
    /* 查询列表 */
    initList () {
      const params = this.handleParams()
      this.spinning = true
      getConfiguredViews(params).then(res => {
        const { content, totalSize } = res.data
        this.total = totalSize || 0
        this.dataList = content || []
        this.spinning = false
      }).catch(() => {
        this.total = 0
        this.dataList = []
        this.spinning = false
      })
    },
    handleCreate () {
      this.showVisible = true
    },
    /* 新增 */
    handleCreateUpdate ({ viewNumber, viewName }) {
      let params = {
        viewName,
        viewNumber: viewNumber || '6'
      }
      createViews(params).then(res => {
        if (res.success) {
          this.$message.success('视图创建成功')
          this.pageNum = 1
          this.initList()
        } else {
          this.$message.error('视图创建失败，请稍后再试')
        }
        this.showVisible = false
      }).catch(e => {
        this.showVisible = false
        this.$message.error('视图创建失败，请稍后再试')
      })
    },
    handleMore ({ viewId }) {
      this.showModel = true
      this.loading = true
      this.pageNumModel = 1
      this.initMore(viewId)
    },
    initMore (viewId, pageNum = 1) {
      const params = {
        viewId,
        pageNum,
        pageSize: 10
      }
      getConfiguredViewsDetailInfo(params).then(res => {
        if (res.success) {
          this.dataSource = res.data || {}
        } else {
          this.dataSource = {}
        }
        this.loading = false
      }).catch(e => {
        this.dataSource = {}
        this.loading = false
      })
    },
    handlePageCurrent (viewId, pageNum) {
      this.loading = true
      this.initMore(viewId, pageNum)
    },
    handleDelete (viewId) {
      deleteConfiguredViews(viewId).then(res => {
        if (res.success) {
          this.$message.success('删除成功')
          this.pageNum = 1
          this.initList()
        } else {
          this.$message.error('删除失败,请稍侯重试')
        }
      })
    }
  },
  mounted () {
    const dom = document.getElementsByClassName('ant-pagination-options-quick-jumper')
    if (dom) {
      dom[0].childNodes[0].nodeValue = '前往'
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/styles/vars.less";
@import "~@/styles/cover.less";
@color-fff: lighten(@dark-color, 100% - lightness(@dark-color));
.home {
  padding: 12px 24px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  .home-contain {
    width: 100%;
    height: calc(100% - 140px);
    .home-page {
      margin-top: 15px;
      text-align: right;
      .ant_pagination_reset();
    }
  }
  /deep/ .ant-spin-nested-loading {
    height: 100%;
    .ant-spin-container {
      height: 100%;
    }
    .ant-spin-spinning {
      max-height: 100%;
    }
  }
}
</style>
